<template>
  <div>
    <div class="block">
      <el-carousel trigger="click" height="150px">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <img :src="'http://localhost:8080/api/files/'+item.idView" class="image" style="width: 100%;height: auto;">
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 权限超管能看到 -->
    <div v-if="user.roleId=== '2C01305AF96C4556BCE7719AACC0DEC6'" style="display: flex;justify-content: center;align-items: center;padding-top: 20px;">
      <el-button  type="primary" @click="createArticleMain()">创建新文章</el-button>
    </div>
    <div >
        <el-row :gutter="20"  style="display: flex;
                  flex-wrap: wrap;
                  align-items: center;
                  padding-bottom: 50px;">
          <el-col :span="24/columnsInRow" 
                  v-for="(item, index) in processedData"
                  :key="index" 
                 >
            <el-card class="box-card" style="margin-top: 20px; ">
              <el-row :gutter="20">
                <el-col :span="6"><div class="grid-content bg-purple">
                  <el-image  class="image1"   :src="'http://localhost:8080/api/files/'+item.articleImage "></el-image>
                </div></el-col>
                <el-col :span="18"><div class="grid-content bg-purple-light">
                  <div slot="header" class="clearfix">
                    <span  @click="openArticleM(item.articleId)" style="cursor: pointer;">{{item.articleTitle}}</span>
                  </div>
                  <div  class="clamp-text">
                    <div v-html="item.articleContent" class="w-e-text-container" @click="openArticleM(item.articleId)"></div>
                  </div>  
                  </div>
                </el-col>
              </el-row>
              
            </el-card>
          </el-col>
        </el-row>
     
    </div>
    <!-- 回显文章 -->
    <div>
      <el-dialog 
        title="文章内容"
        :visible.sync="dialogVisible"
        width="60%"
        >
        <div style="margin-left: 30px;margin-right: 30px;">
          <!-- 文章标题 -->
          <div style="    text-align: center;font-weight: bold;color: #333;line-height: 60px;font-size: 32px;">
            {{ articleMain.articleTitle }}   
          </div>   
          <!-- 发布时间 -->  
          <div>    
            {{ articleMain.createDate }}     
          </div>        
          <!-- 摘要 -->     
          <div style="background-color: #f9f9f9;padding: 20px">
            <i>摘要：</i>
            {{ articleMain.articleAbstract }}
          </div>
          <!-- 内容 -->
          <div v-html="articleMain.articleContent"  style="margin-top: 20px;"></div>

        </div>
        
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 新建文章弹框 -->
    <div>
      <el-dialog 
        title="文章内容"
        :visible.sync="dialogVisible1"
        width="60%"
        style="min-width: 960px;"
        >
        <el-form :model="form" ref="form" >  
          <el-form-item label="标题" label-width="15%" prop="articleTitle">
            <el-input v-model="form.articleTitle" autocomplete="off" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="摘要" label-width="15%" prop="articleTitle">
            <el-input v-model="form.articleAbstract" autocomplete="off" style="width: 90%"></el-input>
          </el-form-item>
          <el-form-item label="封面" label-width="15%" prop="articleTitle">
            <el-upload action="http://localhost:8080/api/files/upload" :on-success="successUpload">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
          </el-form-item>
          <el-form-item label="内容" label-width="15%" >
            <div id="editor" style="width: 90%"></div>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="submitArticleMain(form)">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<style>
.clamp-text {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 设置显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  padding-right: 8px;
  max-height: 60px;
  cursor: pointer; /* 鼠标样式为手型 */
}
.clearfix{
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 设置显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 16px;
    color: #333;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 22px;
    height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-right: 35px;
 
}
.image1{
  max-height: 88px;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
}





</style>
<script>
import request from '@/utils/request';
import E from 'wangeditor';

let editor
function initWangEditor(content) {	setTimeout(() => {
  if(editor){
    editor.destroy();
  }
    editor = new E('#editor')
    editor.config.placeholder = '请输入内容'
    editor.config.uploadFileName = 'file'
    editor.config.uploadImgServer = 'http://localhost:8080/api/files/wang/upload'
    editor.create()
  
  editor.txt.html(content)
}, 0)
}

export default { 
  name: 'HomeView',
  data(){
    return{
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
        imgList: [
          {id:0,idView:'1710593066903'},
          {id:1,idView:'1710593111330'}
        ],
        dialogVisible:false,
        dialogVisible1 :false,
        columnsInRow: 2,
        processedData: [],
        params: {
                pageNum: 1,
                pageSize: 8,
                articleTags: 1,
            },
        articleMain:[],
        form:{

        },
      }
    },
     // 页面加载的时候，做一些事情，在created里面
    created() {
      this. load()
    },
    // 定义一些页面上控件出发的事件调用的方法
    methods: {
     load(){
      this.fetchData();
     },
     successUpload(res) {
            this.form.articleImage = res.data;
        },
     fetchData(){
      request.get("/articleMain/page", {
                params: this.params
            })
      .then(res=>{
        if (res.code === 1) {
                    this.processedData = res.data.list;
                    this.total=res.data.total
                }
                else{
                    this.$message.error(res.msg)
                }
      })
     },
     openArticleM(str){
      this.dialogVisible=true;
      request.get("/articleMain/findById/"+str).then(res=>{
        if(res.code === 1){
          this.articleMain=res.data
        }else{
          this.$message.error(res.msg)
        }
      })
     },
     createArticleMain(){
      initWangEditor("")
      this.dialogVisible1=true
     },
     submitArticleMain(obj){
      this.form.articleContent = JSON.parse(JSON.stringify(editor.txt.html()));
      this.form.articleTags='1';
      request.post("/articleMain/create",obj).then(res=>{
        if(res.code === 1){
          this.form ={};
          this.dialogVisible1=false;
          this.fetchData();
        }else{
          this.$message.error(res.msg)
        }
      })
     }
    }
}

</script> 